<template>
  <div id="footer">
      <ul>
          <router-link tag="li" to="/movie">
              <i class="fa fa-film"></i>
              <p>电影</p>
          </router-link>
          <router-link tag="li" to="/cinema">
              <i class="fa fa-square"></i>
              <p>影院</p>
          </router-link>
          <router-link tag="li" to="/mine">
              <i class="fa fa-user-circle"></i>
              <p>我的</p>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {
    name:'TabBar'
}
</script>

<style scoped>
    #footer{
        position: fixed;
        bottom: 0px;
        width: 100%;
        background: white;
        border-top: 2px solid #ccc;
    }
    li{
        display: inline-block;
        width: 33%;
        text-align: center;
    }
    .router-link-active{
        color:#E54847
    }
</style>